<!-- 仪表盘页面示例 -->
<template>
  <div class="p-6">
    <!-- 页面头部 -->
    <div class="flex-between mb-6">
      <div>
        <h1 class="text-2xl font-bold">数据仪表盘</h1>
        <p class="text-gray-600 dark:text-gray-400 mt-1">实时数据概览与分析</p>
      </div>
      
      <!-- 主题切换和其他操作 -->
      <div class="flex gap-3">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="default"
        />
        
        <!-- 刷新按钮：primary 类型跟随主题色 -->
        <el-button type="primary" :icon="Refresh" @click="refreshData">刷新数据</el-button>
        
        <!-- 主题切换按钮 -->
        <el-button @click="toggleTheme" :icon="isDark ? 'Sunny' : 'Moon'" circle />
      </div>
    </div>

    <!-- 统计卡片区域 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
      <!-- 总销售额 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-1">总销售额</p>
            <p class="text-3xl font-bold">¥126,560</p>
            <div class="flex items-center mt-2">
              <el-tag type="success" size="small">+12.5%</el-tag>
              <span class="text-xs text-gray-500 ml-2">较上月</span>
            </div>
          </div>
          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex-center">
            <el-icon class="text-blue-500 text-xl"><Money /></el-icon>
          </div>
        </div>
      </div>

      <!-- 订单数量 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-1">订单数量</p>
            <p class="text-3xl font-bold">1,543</p>
            <div class="flex items-center mt-2">
              <el-tag type="warning" size="small">+5.2%</el-tag>
              <span class="text-xs text-gray-500 ml-2">较上月</span>
            </div>
          </div>
          <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex-center">
            <el-icon class="text-green-500 text-xl"><ShoppingCart /></el-icon>
          </div>
        </div>
      </div>

      <!-- 用户数量 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-1">活跃用户</p>
            <p class="text-3xl font-bold">8,429</p>
            <div class="flex items-center mt-2">
              <el-tag type="danger" size="small">-2.1%</el-tag>
              <span class="text-xs text-gray-500 ml-2">较上月</span>
            </div>
          </div>
          <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex-center">
            <el-icon class="text-purple-500 text-xl"><User /></el-icon>
          </div>
        </div>
      </div>

      <!-- 转化率 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-1">转化率</p>
            <p class="text-3xl font-bold">68.5%</p>
            <div class="flex items-center mt-2">
              <el-tag type="success" size="small">+8.1%</el-tag>
              <span class="text-xs text-gray-500 ml-2">较上月</span>
            </div>
          </div>
          <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex-center">
            <el-icon class="text-orange-500 text-xl"><TrendCharts /></el-icon>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
      <!-- 销售趋势图 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border p-6">
        <div class="flex-between mb-4">
          <h3 class="text-lg font-semibold">销售趋势</h3>
          <el-button-group>
            <el-button size="small" :type="chartPeriod === '7d' ? 'primary' : 'default'" @click="chartPeriod = '7d'">7天</el-button>
            <el-button size="small" :type="chartPeriod === '30d' ? 'primary' : 'default'" @click="chartPeriod = '30d'">30天</el-button>
            <el-button size="small" :type="chartPeriod === '90d' ? 'primary' : 'default'" @click="chartPeriod = '90d'">90天</el-button>
          </el-button-group>
        </div>
        
        <!-- 模拟图表区域 -->
        <div class="h-64 flex-center border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg">
          <div class="text-center text-gray-500">
            <el-icon class="text-4xl mb-2"><DataLine /></el-icon>
            <p>销售趋势图表</p>
            <p class="text-sm">（此处放置实际图表组件）</p>
          </div>
        </div>
      </div>

      <!-- 产品销量排行 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border p-6">
        <div class="flex-between mb-4">
          <h3 class="text-lg font-semibold">产品销量排行</h3>
          <el-button type="primary" link>查看更多</el-button>
        </div>
        
        <div class="space-y-4">
          <div v-for="(item, index) in productRanking" :key="index" class="flex items-center justify-between">
            <div class="flex items-center">
              <div class="w-8 h-8 rounded-lg flex-center text-white font-bold text-sm mr-3"
                   :class="getRankingColor(index)">
                {{ index + 1 }}
              </div>
              <div>
                <p class="font-medium">{{ item.name }}</p>
                <p class="text-sm text-gray-500">{{ item.category }}</p>
              </div>
            </div>
            <div class="text-right">
              <p class="font-semibold">{{ item.sales }}</p>
              <el-tag :type="item.trend === 'up' ? 'success' : 'danger'" size="small">
                {{ item.change }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 待办事项和快速操作 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 待办事项 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border p-6">
        <div class="flex-between mb-4">
          <h3 class="text-lg font-semibold">今日待办</h3>
          <el-badge :value="todoList.filter(item => !item.completed).length" type="primary">
            <el-button type="primary" link>管理</el-button>
          </el-badge>
        </div>
        
        <div class="space-y-3">
          <div v-for="todo in todoList" :key="todo.id" class="flex items-center">
            <el-checkbox v-model="todo.completed" @change="updateTodo(todo)" />
            <span class="ml-2 flex-1" :class="todo.completed ? 'line-through text-gray-400' : ''">
              {{ todo.title }}
            </span>
            <el-tag v-if="todo.priority === 'high'" type="danger" size="small">高</el-tag>
            <el-tag v-else-if="todo.priority === 'medium'" type="warning" size="small">中</el-tag>
            <el-tag v-else type="info" size="small">低</el-tag>
          </div>
        </div>
      </div>

      <!-- 快速操作 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border p-6">
        <h3 class="text-lg font-semibold mb-4">快速操作</h3>
        <div class="grid grid-cols-2 gap-3">
          <el-button class="h-12" @click="quickAction('add-user')">
            <div class="text-center">
              <el-icon class="text-lg"><User /></el-icon>
              <div class="text-xs mt-1">新增用户</div>
            </div>
          </el-button>
          
          <el-button class="h-12" @click="quickAction('add-product')">
            <div class="text-center">
              <el-icon class="text-lg"><Plus /></el-icon>
              <div class="text-xs mt-1">新增产品</div>
            </div>
          </el-button>
          
          <!-- primary 按钮跟随主题色 -->
          <el-button type="primary" class="h-12" @click="quickAction('create-order')">
            <div class="text-center">
              <el-icon class="text-lg"><Document /></el-icon>
              <div class="text-xs mt-1">创建订单</div>
            </div>
          </el-button>
          
          <el-button type="success" class="h-12" @click="quickAction('export-data')">
            <div class="text-center">
              <el-icon class="text-lg"><Download /></el-icon>
              <div class="text-xs mt-1">导出数据</div>
            </div>
          </el-button>
        </div>
      </div>

      <!-- 系统状态 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border p-6">
        <h3 class="text-lg font-semibold mb-4">系统状态</h3>
        <div class="space-y-4">
          <div class="flex items-center justify-between">
            <span>服务器状态</span>
            <el-tag type="success">正常</el-tag>
          </div>
          <div class="flex items-center justify-between">
            <span>数据库连接</span>
            <el-tag type="success">正常</el-tag>
          </div>
          <div class="flex items-center justify-between">
            <span>缓存服务</span>
            <el-tag type="warning">异常</el-tag>
          </div>
          <div class="flex items-center justify-between">
            <span>存储空间</span>
            <el-tag type="info">75% 已用</el-tag>
          </div>
        </div>
        
        <el-button type="primary" class="w-full mt-4" @click="checkSystemStatus">
          检查系统状态
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Refresh, Money, ShoppingCart, User, TrendCharts, 
  DataLine, Plus, Document, Download 
} from '@element-plus/icons-vue'
import { useTheme } from '@/composables/useTheme'

// 🎯 使用主题系统（可选，用于主题切换功能）
const { isDark, setThemeMode } = useTheme()

// 页面数据
const dateRange = ref([])
const chartPeriod = ref('30d')

// 产品排行数据
const productRanking = ref([
  { name: 'iPhone 15', category: '智能手机', sales: '2,156', change: '+15.2%', trend: 'up' },
  { name: 'MacBook Pro', category: '笔记本电脑', sales: '1,843', change: '+8.7%', trend: 'up' },
  { name: 'iPad Air', category: '平板电脑', sales: '1,567', change: '-2.3%', trend: 'down' },
  { name: 'AirPods Pro', category: '音频设备', sales: '1,234', change: '+22.1%', trend: 'up' },
  { name: 'Apple Watch', category: '智能手表', sales: '987', change: '+6.8%', trend: 'up' }
])

// 待办事项数据
const todoList = ref([
  { id: 1, title: '审核新用户注册申请', completed: false, priority: 'high' },
  { id: 2, title: '更新产品库存信息', completed: true, priority: 'medium' },
  { id: 3, title: '回复客户询价邮件', completed: false, priority: 'high' },
  { id: 4, title: '生成月度销售报告', completed: false, priority: 'medium' },
  { id: 5, title: '优化系统性能', completed: false, priority: 'low' }
])

// 方法
const toggleTheme = () => {
  setThemeMode(isDark.value ? 'light' : 'dark')
}

const refreshData = () => {
  ElMessage.success('数据已刷新')
}

const getRankingColor = (index) => {
  const colors = ['bg-yellow-500', 'bg-gray-400', 'bg-orange-500', 'bg-blue-500', 'bg-green-500']
  return colors[index] || 'bg-gray-500'
}

const updateTodo = (todo) => {
  ElMessage.success(todo.completed ? '任务已完成' : '任务已重新激活')
}

const quickAction = (action) => {
  const actions = {
    'add-user': '新增用户',
    'add-product': '新增产品', 
    'create-order': '创建订单',
    'export-data': '导出数据'
  }
  ElMessage.info(`执行操作：${actions[action]}`)
}

const checkSystemStatus = () => {
  ElMessage.success('系统状态检查完成')
}
</script>
